<div id="app">
    <el-card class="box-card">
        <el-form :inline="true">
            <el-form-item label="订单状态：">
                <el-radio-group v-model="labelPosition" size="small" @input="change">
                    <el-radio-button label="1">待审核</el-radio-button>
                    <el-radio-button label="2" >审核通过</el-radio-button>
                    <el-radio-button label="3">审核驳回</el-radio-button>
                    <el-radio-button label="">全部</el-radio-button>

                </el-radio-group>
            </el-form-item>

            <el-form-item label="负责人：" label-width="100px">
                <div style="display: flex;width: 300px;">
                    <el-input v-model="data.kahuna_name" placeholder="请输入负责人"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="get_list" ></el-button>
                </div>
            </el-form-item>
            <el-form-item label="联系电话：" label-width="100px">
                <div style="display: flex;width: 300px;">
                    <el-input v-model="data.contact_phone" placeholder="请输入联系电话"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="get_list" ></el-button>
                </div>
            </el-form-item>

        </el-form>
        <el-button type="primary" icon="el-icon-refresh" @click="get_list" ></el-button>
        <div style="height: 30px;"></div>
        <el-table v-if="dataArr.length>0"
                  :data="dataArr"
                  border
                  :row-class-name="tableRowClassName"
                  style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="order_no"
                    label="订单编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="consignee"
                    label="收货人"
            >
            </el-table-column>

            <el-table-column v-if="dataArr[0].admin_type!==1"
                             prop="employee_name"
                             label="负责人"
            >
            </el-table-column>

            <el-table-column
                             prop="change_info"
                             label="变更内容"
                             width="110"
            >
                <template slot-scope="{row}">
                    {{row.change_info==0?'未变更':row.change_info==1?'收货信息':row.change_info==2?'订单商品':''}}
                </template>
            </el-table-column>
            <el-table-column  v-if="dataArr[0].admin_type!==2"
                             prop="change_auditor"
                             label="变更审核人"
            >
            </el-table-column>

            <el-table-column
                             prop="change_status"
                             label="变更状态"
                             width="110"
            >
                <template slot-scope="{row}">
                    <div>
                        <span v-if="row.change_status==0"></span>
                        <span v-else-if="row.change_status==1" style="color: #FF8800 ;">待审核</span>
                        <span v-else-if="row.change_status==2" style="color: #24B364;">审核通过</span>
                        <span v-else-if="row.change_status==3" style="color: #E51300;">审核驳回</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column v-if="dataArr[0].admin_type!==1 && dataArr[0].admin_type!==2"
                             prop="change_info"
                             label="变更审核"
                             width="110"
            >
                <template slot-scope="{row}">
                    {{row.is_change==1?'否':row.is_change==2?'是':''}}
                </template>
            </el-table-column>
            <el-table-column v-if="dataArr[0].admin_type!==2"
                             prop="contact_phone"
                             label="联系电话"
                             width="110"
            >
            </el-table-column>
            <el-table-column
                    prop="change_reason"
                    label="驳回原因"
            >
            </el-table-column>
            <el-table-column
                    prop="change_application_time"
                    label="申请时间"
            >
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="{row}">
                    <div v-if="row.admin_type==0">
                        <div v-if="row.change_status==1">
                            <el-button type="text" size="mini" @click="detail_show(row)">详情</el-button>
                            <el-button type="text" size="mini" @click="examine(row.id)">审核</el-button>
                        </div>
                        <div v-else>
                            <el-button type="text" size="mini" @click="detail_show(row)">详情</el-button>
                        </div>
                    </div>
                    <div v-if="row.admin_type==1">
                        <el-button type="text" size="mini" @click="detail_show(row)">详情</el-button>
                    </div>
                    <div v-if="row.admin_type==2">
<!--                        {{row.status}}-->
                        <div v-if="row.change_status==1">
                            <el-button type="text" size="mini" @click="detail_show(row)">详情</el-button>
                            <el-button type="text" size="mini" @click="examine(row.id)">审核</el-button>
                        </div>
                        <div v-else>
                            <el-button type="text" size="mini" @click="detail_show(row)">详情</el-button>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </el-card>
    <el-dialog
            title="订单详情"
            :visible.sync="dialogVisible"
            width="85%"
    >
        <div v-if="active_int==1">
            <div class="border">
                <fieldset class="layui-elem-field layui-field-title" >
                    <legend style="font-weight: bold;font-size: 16px;">收货信息</legend>
                </fieldset>
                <table style="width: 100%;line-height: 1.8;" class="table">
                    <tr>
                        <td>收货：{{detail_obj.consignee}}</td>
                        <td>联系电话：{{detail_obj.contact_phone}}</td>
                        <td>收货地址：{{detail_obj.provinces}}{{detail_obj.city}}{{detail_obj.area}}{{detail_obj.address}}</td>
                    </tr>
                </table>
                <!--                    <div class="tit"></div>-->
                <fieldset class="layui-elem-field layui-field-title" style="font-weight: bold;">
                    <legend style="font-weight: bold;font-size: 16px;">订单信息</legend>
                </fieldset>
                <table style="width: 100%;line-height: 1.8;">
                    <tr>
                        <td>订单编号：{{detail_obj.order_no}}</td>
                        <td>负责人：{{detail_obj.new_employee_name}}</td>
                        <td>收款金额：{{detail_obj.amount_collected}}</td>
                    </tr>
                    <tr>
                        <td>下单时间：{{detail_obj.create_time}}</td>
                        <td>订单状态：{{detail_obj.status==1?'未下单':detail_obj.status==2?'待审核':detail_obj.status==3?'通过':detail_obj.status==4?'驳回':detail_obj.status==6?'出库完成':detail_obj.status==7?'取消':detail_obj.status==8?'有售后':detail_obj.status==9?'售后完成':detail_obj.status==10?'已打印':''}}
                        </td>
                        <td>变更审核人：{{detail_obj.change_auditor}}</td>
                    </tr>
                    <tr>
                        <td>订单驳回原因：{{detail_obj.reason}}</td>

                    </tr>
                    <tr>
<!--                        <td style="display: flex;align-items: center;" v-if="detail_obj.collection_voucher">-->
<!--                            收款凭证：-->
<!--                            <el-image v-for="item of detail_obj.collection_voucher"-->
<!--                                             style="width: 100px; height: 100px"-->
<!--                                             :src="item"-->
<!--                                             :preview-src-list="detail_obj.collection_voucher"-->
<!--                                             fit="contain">-->
<!--                            </el-image>-->
<!--                        </td>-->
                        <td>备注：{{detail_obj.remark}}</td>
<!--                        <td>出库单号：{{detail_obj.taskId}}</td>-->
                    </tr>
                </table>
                <fieldset class="layui-elem-field layui-field-title" >
                    <legend style="font-weight: bold;font-size: 16px;">收款凭证</legend>
                </fieldset>
                <div style="display: flex;align-items: center;" v-if="detail_obj.collection_voucher">
                    <el-image v-for="item of detail_obj.collection_voucher"
                              style="width: 100px; height: 100px;margin: 10px 0;"
                              :src="item"
                              :preview-src-list="detail_obj.collection_voucher"
                              fit="contain">
                    </el-image>
                </div>
                <fieldset class="layui-elem-field layui-field-title" >
                    <legend style="font-weight: bold;font-size: 16px;">商品信息</legend>
                </fieldset>
                <el-table :data="detail_obj.order_item"
                          border>
                    <el-table-column label="商品" prop="good_name" width="200"></el-table-column>
                    <el-table-column label="数量" prop="num" width="110"></el-table-column>
                </el-table>
            </div>
        </div>
        <div v-else-if="active_int==2">
            <div v-if="row.status==2">
                <el-button type="text" size="mini" @click="detail_show(row)">详情</el-button>
                <el-button type="text" size="mini" @click="examine(row.id)">审核</el-button>
            </div>
            <div v-else>
                <el-button type="text" size="mini" @click="detail_show(row)">详情</el-button>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
            title="变更提示"
            :visible.sync="dialogVisible_change"
            width="30%"
    >
        <el-select v-model="change_info_val">
            <el-option label="收货信息"
                       :value="1"></el-option>
            <el-option label="订单商品"
                       :value="2"></el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible_change = false">取 消</el-button>
    <el-button type="primary" @click="success">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
            title="修改审核状态"
            :visible.sync="dialogVisible_refuse"
            width="30%"
    >
        <el-form >
            <el-form-item label="审核状态：" label-width="100px">
                <el-select v-model="change_refuse_val">
                    <el-option label="通过"
                               :value="1"></el-option>
                    <el-option label="驳回"
                               :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="change_refuse_val==2" label="驳回原因：" label-width="110px">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="refuse_textarea">
                </el-input>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible_refuse = false">取 消</el-button>
    <el-button type="primary" @click="success_refuse">确 定</el-button>
  </span>
    </el-dialog>
</div>
<script !src="">
    new Vue({
        el: '#app',
        data: function() {
            return {
                form:{},
                dataArr:[],
                labelPosition:1,
                bh:'',
                value2:'',
                data:{
                    page:1,
                    limit:10,
                    order_no:'',
                    change_status:1,
                    consignee:'',
                    kahuna_name:'',
                    contact_phone:''
                },
                total:0,
                currentPage:1,
                dialogVisible: false,
                active_int:1,
                detail_obj:{},
                dialogVisible_change:false,
                change_info_val:1,
                change_info_id:'',
                dialogVisible_refuse:false,
                change_refuse_val:1,
                refuse_textarea:'',
                refuse_id:'',
                refuse_data:{},
                imageUrl:''
            }
        },
        created(){
            this.get_list()
        },
        methods:{
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data.url
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 50;

                // if (!isJPG) {
                //     this.$message.error('上传头像图片只能是 JPG 格式!');
                // }

                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 50MB!');
                }
                return  isLt2M;
            },
            tableRowClassName({row, rowIndex}) {
                if (row.change_status==1){
                    return 'warning-row';
                }else if(row.change_status==2){
                    return 'success-row';
                }else if(row.change_status==3){
                    return 'danger-row';
                }else{
                    return '';
                }
            },
            success_refuse(){
                var id = this.refuse_id
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if(this.change_refuse_val==1){
                    $.ajax({
                        url: "/admin/chao.change_order/change_order_review",
                        data: {id,noodle_image:this.imageUrl},
                        type: 'POST',
                        dataType: 'json',
                        success: (res) => {
                            loading.close();
                            if (res.code == 1) {
                                var item = this.dataArr.find(d => d.id == id)
                                item.change_status=2
                                this.$message({
                                    type: 'success',
                                    message: res.msg
                                });
                                this.dialogVisible_refuse = false
                            } else {
                                this.$message({
                                    type: 'info',
                                    message: res.msg
                                });
                            }
                        },
                        error:()=>{
                            loading.close();
                            this.$message({
                                type: 'info',
                                message: '网络状态差'
                            });
                        }
                    })
                }else if(this.change_refuse_val==2){
                    if(this.refuse_textarea!==''){
                        $.ajax({
                            url:"/admin/chao.change_order/change_order_refuse",
                            data:{id,change_reason:this.refuse_textarea},
                            type:'POST',
                            dataType: 'json',
                            success:(res)=>{
                                loading.close();
                                if(res.code==1){
                                    var item = this.dataArr.find(d=>d.id==id)
                                    item.change_status=3
                                    this.dialogVisible_refuse = false
                                    item.change_reason = this.refuse_textarea
                                    this.$message({
                                        type: 'success',
                                        message: res.msg
                                    });
                                }else{
                                    this.$message({
                                        type: 'info',
                                        message: res.msg
                                    });
                                }
                            },
                            error:()=>{
                                loading.close();
                                this.$message({
                                    type: 'info',
                                    message: '网络状态差'
                                });
                            }
                        })
                    }
                }
            },
            success(){
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.1)'
                });
                $.ajax({
                    url:"/admin/ord.order/change_information",
                    data:{change_info:this.change_info_val,id:this.change_info_id},
                    type:'POST',
                    dataType: 'json',
                    success:(res)=>{
                        loading.close();
                        if(res.code==1){
                            var item = this.dataArr.find(d=>d.id==this.change_info_id)
                            item.change_info = this.change_info_val
                            this.$message({
                                type: 'success',
                                message: res.msg
                            });
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.msg
                            });
                        }
                    },
                    error:()=>{
                        loading.close();
                        this.$message({
                            type: 'info',
                            message: '网络状态差'
                        });
                    }
                })
                this.dialogVisible_change = false
            },
            change_info(id){
                this.dialogVisible_change = true
                this.change_info_id = id
            },
            cancel_order(id){
                this.$confirm('是否取消此订单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    $.ajax({
                        url:"/admin/ord.order/cancel_order",
                        data:{id},
                        type:'POST',
                        dataType: 'json',
                        success:(res)=>{
                            loading.close();
                            if(res.code==1){
                                var item = this.dataArr.find(d=>d.id==id)
                                item.status = 7
                                this.$message({
                                    type: 'success',
                                    message: res.msg
                                });
                            }else{
                                this.$message({
                                    type: 'info',
                                    message: res.msg
                                });
                            }
                        },
                        error:()=>{
                            loading.close();
                            this.$message({
                                type: 'info',
                                message: '网络状态差'
                            });
                        }
                    })

                }).catch(() => {
                });
            },
            examine(id){
                this.dialogVisible_refuse = true
                this.refuse_id = id
                this.refuse_data = this.dataArr.find(d=>d.id == id)
                this.imageUrl = ''
            },
            onSubmit(){},
            detail_show(data){
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                $.ajax({
                    url:"/admin/ord.order/ord_detail",
                    data:{id:data.id},
                    type:'GET',
                    dataType: 'json',
                    success:(res)=>{
                        loading.close();
                        if(res.code==1){
                            this.dialogVisible = true;
                            this.active_int=1;
                            this.detail_obj = res.data
                            $.ajax({
                                url:'/admin/ord.order/get_preaive',
                                dataType:"json",
                                success:(res_p)=>{
                                    var province = res_p.data.find(item=>{
                                        return  item.id == this.detail_obj.provinces
                                    })
                                    $.ajax({
                                        url:'/admin/ord.order/city',
                                        data:{pid:this.detail_obj.provinces},
                                        dataType:"json",
                                        success:(res_c)=>{
                                            var city = res_c.data.find(item=>{
                                                return  item.id == this.detail_obj.city
                                            })
                                            $.ajax({
                                                url:'/admin/ord.order/area',
                                                data:{cid:this.detail_obj.city},
                                                dataType:"json",
                                                success:(res_a)=>{
                                                    var area = res_a.data.find(item=>{
                                                        return  item.id == this.detail_obj.area
                                                    })
                                                    this.detail_obj.provinces = province.name
                                                    this.detail_obj.city = city.name
                                                    this.detail_obj.area = area.name
                                                }
                                            })
                                        }
                                    })
                                },
                                error:()=>{
                                    loading.close();
                                    this.$message({
                                        type: 'info',
                                        message: '网络状态差'
                                    });
                                }
                            })
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.msg
                            });
                        }
                    }
                })
            },
            createOrder(){
                window.location.href = '/admin/ord.order/add'
            },
            change(){
                this.data.change_status = this.labelPosition
                this.data.page = 1
                this.data.limit = 10
                this.dataArr = []
                this.get_list()

            },
            handleSizeChange(val){
                this.data.limit = val
                this.get_list()
            },
            handleCurrentChange(val) {
                this.data.page = val
                this.get_list()
            },
            get_list(){

                $.ajax({
                    url:'/admin/chao.change_order/index',
                    data:this.data,
                    dataType:"json",
                    success:(res)=>{
                        this.dataArr = res.data
                        this.total = res.count
                    }
                })
            }
        },
        mounted() {

        }
    })
</script>
<style>

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 112px;
        height: 112px;
        line-height: 112px;
        text-align: center;
    }
    .avatar {
        width: 112px;
        height: 112px;
        display: block;
    }

    .border{
        padding: 20px;
        border: 1px solid rgba(232, 232, 232, 1);
    }
    .tit{
        font-weight: bold;
        height: 40px;
        line-height: 40px;
    }
    .el-table .warning-row {
        background: #FFF8E6;
    }

    .el-table .success-row {
        background: #E0FFEE;
    }
    .el-table .danger-row {
        background: #FFE5E5;
    }
    .el-upload{
        width: 110px;
        height: 110px;
        border: 1px solid #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>